<template>
  <div class="app-container"
       v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-button style="margin-left: 10px;"
                 type="primary"
                 icon="el-icon-edit"
                 @click.native.prevent="handleCreate">
        添加
      </el-button>
      <el-button style="margin-left: 10px;"
                 type="danger"
                 icon="el-icon-delete"
                 @click.native.prevent="handleDelete">
        删除
      </el-button>
    </div>
    <el-table border
              stripe
              highlight-current-row
              style="width: 100%;"
              :data="listData"
              @selection-change="handleSelectionChange"
              :empty-text="emptyText">
      <el-table-column type="selection"
                       width="55px"></el-table-column>
      <el-table-column label="ID"
                       width="40px"
                       prop="internshipId"></el-table-column>
      <el-table-column label="公司名称"
                       width="160px"
                       prop="name"></el-table-column>
      <!-- <el-table-column label="宣传图"
                       width="80px"
                       prop="bannerImage"></el-table-column> -->
      <el-table-column label="电话"
                       width="120px"
                       prop="tel"></el-table-column>
      <el-table-column label="招聘信息"
                       width="200px"
                       prop="job"></el-table-column>
      <el-table-column label="薪资待遇"
                       width="200px"
                       prop="salary"></el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click.native.prevent="handleEdit(scope.row.internshipId)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination background
                     :pager-count="pagerCount"
                     :page-size="reqData.perPage"
                     :current-page="reqData.curPage"
                     layout="prev, pager, next"
                     @current-change="pageChange"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, del } from "@/api/internship";
import { errorMsg, successMsg } from "@/utils/my";

export default {
  inject: ["reload"],
  data () {
    return {
      reqData: {
        curPage: 1,
        perPage: 10
      },
      pagerCount: 13,
      total: 0,
      listData: [],
      loading: true,
      delRows: [],
      delIds: "",
      emptyText: "暂无任何数据"
    };
  },

  created () {
    this.fetchData();
  },

  methods: {
    handleCreate () {
      this.$router.push({ path: "/admin/company/internship/create" });
    },

    handleEdit (id) {
      this.$router.push({ path: "/admin/company/internship/edit/" + id });
    },

    pageChange (p) {
      this.reqData.curPage = p;
      this.fetchData();
    },

    fetchData () {
      let that = this;
      that.loading = true;
      getList(that.reqData).then(res => {
        that.loading = false;
        that.total = res.data.total;
        that.listData = res.data.list;
      });
    },

    handleSelectionChange (rows) {
      this.delRows = rows;
      let idArr = [];
      for (let i = 0; i < rows.length; i++) {
        idArr.push(rows[i].internshipId);
      }
      this.delIds = idArr.join(",");
    },

    handleDelete () {
      let that = this;
      if (that.delIds.length <= 0) {
        return errorMsg("请至少选择一项");
      }
      that.loading = true;
      del({ ids: that.delIds }).then(res => {
        that.loading = false;
        if (res.code != 20000) {
          return errorMsg(res.message);
        }
        successMsg(res.message);
        that.reload();
      });
    }
  }
};
</script>

<style>
.filter-container {
  margin-bottom: 10px;
}

.pager {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
</style>
